<template>
    <div class="analysis-container">
       <el-row :gutter="20" class="compact-row">
         <!-- 第一行：两个紧凑模块 -->
         <el-col :span="12">
           <div class="compact-chart">
             <TotalPie 
               v-if="!loading && totalData.graduateNum > 0"
               :chart-data="totalData"
             />
           </div>
         </el-col>
   
         <el-col :span="12">
           <div class="compact-chart">
             <Salary 
               v-if="!loading && salaryData.length > 0"
               :chart-data="salaryData"
             />
           </div>
         </el-col>
       </el-row>
   
       <!-- 第二行：单个模块 -->
       <el-row class="compact-row">
         <el-col :span="24">
           <div class="full-chart">
             <IndustryPie 
               v-if="!loading && industryData.length > 0"
               :chart-data="industryData"
             />
           </div>
         </el-col>
       </el-row>
   
       <div v-if="loading" class="loading">
         <i class="el-icon-loading"></i> 数据加载中...
       </div>
     </div>
</template>
     
<script>
     import TotalPie from './charts/TotalPie.vue';
     import Salary from './charts/Salary.vue';
     import IndustryPie from './charts/IndustryPie.vue';
     import { total, salary, industry } from '../../api/chartApi';
     
     export default {
       components: { TotalPie, Salary, IndustryPie },
       data: () => ({
         totalData: {
           graduateNum: 0,
           haveWorkNum: 0,
           noWorkNum: 0
         },
         salaryData: [],
         industryData: [],
         loading: true
       }),
       async created() {
         try {
           const [totalRes, salaryRes, industryRes] = await Promise.all([
             total(),
             salary(),
             industry()
           ]);
     
           if (totalRes.code === 200) this.totalData = totalRes.data;
           if (salaryRes.code === 200) this.salaryData = salaryRes.data;
           if (industryRes.code === 200) this.industryData = industryRes.data;
     
         } catch (error) {
           this.$message.error('数据加载失败');
           console.error('API Error:', error);
         } finally {
           this.loading = false;
         }
       }
     };
</script>
     
<style scoped>
   .analysis-container {
     padding: 20px;
     background: transparent; /* 移除背景色 */
   }
      
   .loading {
     text-align: center;
     padding: 30px 0;
     font-size: 14px;
     color: #909399;
   }
   
   .el-icon-loading {
     margin-right: 6px;
     animation: rotating 2s linear infinite;
   }
   
   @keyframes rotating {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
</style>